import { LitElement, css, html } from "lit";
import { customElement } from "lit/decorators.js";

/**
 * @desc 简历
 */
@customElement("cv-resume")
export class CvResume extends LitElement {
  constructor() {
    super();
  }

  static override styles = css`
    :host {
      display: flex;
      flex-direction: column;
      align-items: center;
    }
  `;

  override createRenderRoot() {
    // 返回this表示不使用shadow root，而是渲染到light DOM
    return this;
  }

  override render() {
    return html`
      <div class="min-h-screen bg-gradient-to-br from-blue-50 to-indigo-100">
        <!-- 导航栏 -->
        <nav class="bg-white shadow-sm border-b border-gray-200">
          <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="flex justify-between items-center h-16">
              <div class="flex items-center space-x-8">
                <span class="text-xl font-bold text-gray-900">Portfolio</span>
                <div class="hidden md:flex space-x-6">
                  <a
                    href="#"
                    class="text-gray-600 hover:text-gray-900 transition-colors"
                    >About</a
                  >
                  <a
                    href="#"
                    class="text-gray-600 hover:text-gray-900 transition-colors"
                    >Skills</a
                  >
                  <a
                    href="#"
                    class="text-gray-600 hover:text-gray-900 transition-colors"
                    >Projects</a
                  >
                  <a
                    href="#"
                    class="text-gray-600 hover:text-gray-900 transition-colors"
                    >Contact</a
                  >
                </div>
              </div>
              <button
                class="bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700 transition-colors"
              >
                Download CV
              </button>
            </div>
          </div>
        </nav>

        <!-- 主要内容区域 -->
        <main class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
          <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
            <!-- 左侧个人信息 -->
            <div class="lg:col-span-1">
              <div class="bg-white rounded-2xl shadow-lg p-8">
                <div class="text-center">
                  <div
                    class="w-32 h-32 mx-auto mb-4 rounded-full bg-gradient-to-r from-blue-400 to-indigo-600 flex items-center justify-center"
                  >
                    <span class="text-white text-4xl font-bold">JD</span>
                  </div>
                  <h1 class="text-2xl font-bold text-gray-900 mb-2">
                    John Doe
                  </h1>
                  <p class="text-gray-600 mb-4">Full Stack Developer</p>
                  <div class="flex justify-center space-x-3 mb-6">
                    <a
                      href="#"
                      class="w-10 h-10 bg-gray-100 rounded-full flex items-center justify-center hover:bg-gray-200 transition-colors"
                    >
                      <svg
                        class="w-5 h-5 text-gray-600"
                        fill="currentColor"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"
                        />
                      </svg>
                    </a>
                    <a
                      href="#"
                      class="w-10 h-10 bg-gray-100 rounded-full flex items-center justify-center hover:bg-gray-200 transition-colors"
                    >
                      <svg
                        class="w-5 h-5 text-gray-600"
                        fill="currentColor"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M19 0h-14c-2.761 0-5 2.239-5 5v14c0 2.761 2.239 5 5 5h14c2.762 0 5-2.239 5-5v-14c0-2.761-2.238-5-5-5zm-11 19h-3v-11h3v11zm-1.5-12.268c-.966 0-1.75-.79-1.75-1.764s.784-1.764 1.75-1.764 1.75.79 1.75 1.764-.783 1.764-1.75 1.764zm13.5 12.268h-3v-5.604c0-3.368-4-3.113-4 0v5.604h-3v-11h3v1.765c1.396-2.586 7-2.777 7 2.476v6.759z"
                        />
                      </svg>
                    </a>
                  </div>
                </div>

                <div class="border-t pt-6 mt-6">
                  <h3 class="font-semibold text-gray-900 mb-3">Contact Info</h3>
                  <div class="space-y-2 text-sm">
                    <div class="flex items-center text-gray-600">
                      <svg
                        class="w-4 h-4 mr-2"
                        fill="none"
                        stroke="currentColor"
                        viewBox="0 0 24 24"
                      >
                        <path
                          stroke-linecap="round"
                          stroke-linejoin="round"
                          stroke-width="2"
                          d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"
                        />
                      </svg>
                      john.doe@email.com
                    </div>
                    <div class="flex items-center text-gray-600">
                      <svg
                        class="w-4 h-4 mr-2"
                        fill="none"
                        stroke="currentColor"
                        viewBox="0 0 24 24"
                      >
                        <path
                          stroke-linecap="round"
                          stroke-linejoin="round"
                          stroke-width="2"
                          d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"
                        />
                      </svg>
                      +1 234 567 8900
                    </div>
                    <div class="flex items-center text-gray-600">
                      <svg
                        class="w-4 h-4 mr-2"
                        fill="none"
                        stroke="currentColor"
                        viewBox="0 0 24 24"
                      >
                        <path
                          stroke-linecap="round"
                          stroke-linejoin="round"
                          stroke-width="2"
                          d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"
                        />
                        <path
                          stroke-linecap="round"
                          stroke-linejoin="round"
                          stroke-width="2"
                          d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"
                        />
                      </svg>
                      San Francisco, CA
                    </div>
                  </div>
                </div>
              </div>
            </div>

            <!-- 右侧详细信息 -->
            <div class="lg:col-span-2 space-y-8">
              <!-- 关于我 -->
              <div class="bg-white rounded-2xl shadow-lg p-8">
                <h2 class="text-2xl font-bold text-gray-900 mb-4">About Me</h2>
                <p class="text-gray-600 leading-relaxed">
                  Passionate full-stack developer with 5+ years of experience
                  building scalable web applications. I specialize in React,
                  Node.js, and cloud technologies. I love turning complex
                  problems into simple, beautiful, and intuitive solutions.
                </p>
              </div>

              <!-- 技能 -->
              <div class="bg-white rounded-2xl shadow-lg p-8">
                <h2 class="text-2xl font-bold text-gray-900 mb-6">Skills</h2>
                <div class="grid grid-cols-2 md:grid-cols-3 gap-4">
                  <div class="flex items-center space-x-2">
                    <div class="w-2 h-2 bg-blue-600 rounded-full"></div>
                    <span class="text-gray-700">JavaScript</span>
                  </div>
                  <div class="flex items-center space-x-2">
                    <div class="w-2 h-2 bg-blue-600 rounded-full"></div>
                    <span class="text-gray-700">React</span>
                  </div>
                  <div class="flex items-center space-x-2">
                    <div class="w-2 h-2 bg-blue-600 rounded-full"></div>
                    <span class="text-gray-700">Node.js</span>
                  </div>
                  <div class="flex items-center space-x-2">
                    <div class="w-2 h-2 bg-blue-600 rounded-full"></div>
                    <span class="text-gray-700">Python</span>
                  </div>
                  <div class="flex items-center space-x-2">
                    <div class="w-2 h-2 bg-blue-600 rounded-full"></div>
                    <span class="text-gray-700">AWS</span>
                  </div>
                  <div class="flex items-center space-x-2">
                    <div class="w-2 h-2 bg-blue-600 rounded-full"></div>
                    <span class="text-gray-700">MongoDB</span>
                  </div>
                </div>
              </div>

              <!-- 项目展示 -->
              <div class="bg-white rounded-2xl shadow-lg p-8">
                <h2 class="text-2xl font-bold text-gray-900 mb-6">
                  Featured Projects
                </h2>
                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                  <div
                    class="border border-gray-200 rounded-lg p-4 hover:shadow-md transition-shadow"
                  >
                    <div
                      class="h-32 bg-gradient-to-r from-purple-400 to-pink-400 rounded-lg mb-3"
                    ></div>
                    <h3 class="font-semibold text-gray-900 mb-2">
                      E-Commerce Platform
                    </h3>
                    <p class="text-sm text-gray-600 mb-3">
                      Full-stack e-commerce solution with React and Node.js
                    </p>
                    <div class="flex space-x-2">
                      <span
                        class="text-xs bg-gray-100 text-gray-700 px-2 py-1 rounded"
                        >React</span
                      >
                      <span
                        class="text-xs bg-gray-100 text-gray-700 px-2 py-1 rounded"
                        >Node.js</span
                      >
                      <span
                        class="text-xs bg-gray-100 text-gray-700 px-2 py-1 rounded"
                        >MongoDB</span
                      >
                    </div>
                  </div>
                  <div
                    class="border border-gray-200 rounded-lg p-4 hover:shadow-md transition-shadow"
                  >
                    <div
                      class="h-32 bg-gradient-to-r from-blue-400 to-cyan-400 rounded-lg mb-3"
                    ></div>
                    <h3 class="font-semibold text-gray-900 mb-2">
                      Task Management App
                    </h3>
                    <p class="text-sm text-gray-600 mb-3">
                      Collaborative task management tool with real-time updates
                    </p>
                    <div class="flex space-x-2">
                      <span
                        class="text-xs bg-gray-100 text-gray-700 px-2 py-1 rounded"
                        >Vue.js</span
                      >
                      <span
                        class="text-xs bg-gray-100 text-gray-700 px-2 py-1 rounded"
                        >Firebase</span
                      >
                      <span
                        class="text-xs bg-gray-100 text-gray-700 px-2 py-1 rounded"
                        >Tailwind</span
                      >
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </main>
      </div>
    `;
  }
}
